docs/source/History.html (Case Conflict 1)

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">\r
   9 Ext.onReady(function() {\r
  10     \r
  11     // The only requirement for this to work is that you must have a hidden field and\r
  12     // an iframe available in the page with ids corresponding to Ext.History.fieldId\r
  13     // and Ext.History.iframeId.  See history.html for an example.\r
  14     Ext.History.init();\r
  15     \r
  16     // Needed if you want to handle history for multiple components in the same page.\r
  17     // Should be something that won't be in component ids.\r
  18     var tokenDelimiter = ':';\r
  19     \r
  20     var tp = new Ext.TabPanel({\r
  21         renderTo: Ext.getBody(),\r
  22         id: 'main-tabs',\r
  23         height: 300,\r
  24         width: 600,\r
  25         activeTab: 0,\r
  26         \r
  27         items: [{\r
  28             xtype: 'tabpanel',\r
  29             title: 'Tab 1',\r
  30             id: 'tab1',\r
  31             activeTab: 0,\r
  32             tabPosition: 'bottom',\r
  33             \r
  34             items: [{\r
  35                 title: 'Sub-tab 1',\r
  36                 id: 'subtab1'\r
  37             },{\r
  38                 title: 'Sub-tab 2',\r
  39                 id: 'subtab2'\r
  40             },{\r
  41                 title: 'Sub-tab 3',\r
  42                 id: 'subtab3'\r
  43             }],\r
  44             \r
  45             listeners: {\r
  46                 'tabchange': function(tabPanel, tab){\r
  47                     Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);\r
  48                 }\r
  49             }\r
  50         },{\r
  51             title: 'Tab 2',\r
  52             id: 'tab2'\r
  53         },{\r
  54             title: 'Tab 3',\r
  55             id: 'tab3'\r
  56         },{\r
  57             title: 'Tab 4',\r
  58             id: 'tab4'\r
  59         },{\r
  60             title: 'Tab 5',\r
  61             id: 'tab5'\r
  62         }],\r
  63         \r
  64         listeners: {\r
  65             'tabchange': function(tabPanel, tab){\r
  66                 // Ignore tab1 since it is a separate tab panel and we're managing history for it also.\r
  67                 // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.\r
  68                 if(tab.id != 'tab1'){\r
  69                     Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);\r
  70                 }\r
  71             }\r
  72         }\r
  73     });\r
  74     \r
  75     // Handle this change event in order to restore the UI to the appropriate history state\r
  76     Ext.History.on('change', function(token){\r
  77         if(token){\r
  78             var parts = token.split(tokenDelimiter);\r
  79             var tabPanel = Ext.getCmp(parts[0]);\r
  80             var tabId = parts[1];\r
  81             \r
  82             tabPanel.show();\r
  83             tabPanel.setActiveTab(tabId);\r
  84         }else{\r
  85             // This is the initial default state.  Necessary if you navigate starting from the\r
  86             // page without any existing history token params and go back to the start state.\r
  87             tp.setActiveTab(0);\r
  88             tp.getItem(0).setActiveTab(0);\r
  89         }\r
  90     });\r
  91     \r
  92 });</pre>    \r
  93 </body>\r
  94 </html>